<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :title="dialogText"
             width="50%" @open="open" class="menuDialogWrapper">
    <el-form ref="form" :model="formData" label-width="100px"
             class="form" :rules="formRuler">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item prop="menuCode" label="菜单编码">
            <el-input v-model="formData.menuCode" placeholder="菜单编码"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuName" label="菜单名称">
            <el-input v-model="formData.menuName" placeholder="菜单名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuIcon" label="菜单图标">
            <el-input v-model="formData.menuIcon" placeholder="菜单图标"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuUrl" label="菜单链接">
            <el-input v-model="formData.menuUrl" placeholder="菜单链接"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuOrder" label="菜单排序">
            <el-input v-model="formData.menuOrder" placeholder="菜单排序"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="menuDesc" label="菜单描述">
            <el-input v-model="formData.menuDesc" placeholder="菜单描述"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="resetDialog">重置</el-button>
        <el-button @click="handleAddMenu" :loading="submitLoading" type="primary">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ResultCode } from '@/constants/constants'
import SystemMenuInsertDTO from '@/api/entity/SystemMenuInsertDTO'
import { insertMenu } from '@/api/ApiSystemMenu'

export default {
  name: 'MenuDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    parentId: {
      required: true,
      type: [Number, String]
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      submitLoading: false,
      dialogVisible: false,
      formData: this.initData(),
      formRuler: {
        menuCode: [{
          required: true,
          message: '菜单编码不能为空',
          trigger: 'blur'
        }],
        menuName: [{
          required: true,
          message: '菜单名称不能为空',
          trigger: 'blur'
        }],
        menuIcon: [{
          required: true,
          message: '菜单图标不能为空',
          trigger: 'blur'
        }],
        menuUrl: [{
          required: true,
          message: '菜单链接不能为空',
          trigger: 'blur'
        }],
        menuOrder: [{
          required: true,
          message: '菜单排序不能为空',
          trigger: 'blur'
        }],
        menuDesc: [{
          required: true,
          message: '菜单描述不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    dialogText () {
      return this.parentId && this.parentId > 0 ? '添加子节点' : '添加根节点'
    }
  },
  methods: {
    initData () {
      return {
        menuCode: '',
        menuName: '',
        menuIcon: '',
        menuUrl: '',
        menuOrder: '',
        menuDesc: '',
        parentMenuId: ''
      }
    },
    open () {
      this.resetDialog()
    },
    /**
       * 关闭本对话框
       */
    closeDialog () {
      this.resetDialog()
      this.dialogVisible = false
    },
    /**
       * 重置数据
       */
    resetDialog () {
      this.formData = this.initData()
    },
    /**
       * 提交，添加菜单分类数据
       */
    handleAddMenu () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.parentId || this.parentId < 0) {
            this.parentId = 0
          }
          this.submitLoading = true
          const params = Object.assign(SystemMenuInsertDTO.instance(), this.formData)
          params.menuId = undefined
          params.setParentMenuId(this.parentId)
          insertMenu([params], data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('添加菜单成功')
              this.$emit('change')
              this.dialogVisible = false
            }
          }, () => {
            this.submitLoading = false
          })
        }
      })
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .menuDialogWrapper{
    .form{
      padding: 8px 10px;
    }
  }
</style>
